<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="合同信息" name="first">
        <el-container>
          <el-header>
            ▍<span style="color:black;">房产信息</span>
            {{"\xa0"}}{{"\xa0"}}
            <el-button type="warning" @click="chosehouse">选择收房合同</el-button>
          </el-header>
          <el-main>
            <el-form ref="housemsg" :inline="true" :model="sfcontract" label-width="80px">
              <el-form-item label="小区名称" prop="premiseName">
                <el-input v-model="sfcontract.premiseName" readonly="readonly"/>
              </el-form-item>
              <el-form-item label="房产信息" prop="houseName">
                <el-input v-model="sfcontract.houseName" readonly="readonly" />
              </el-form-item>
            </el-form>
            所有权类型
            <el-select v-model="sfcontract.houseType" placeholder="请选择所有权类型">
              <el-option label="国有房产" value="1" />
              <el-option label="直管房产" value="2" />
              <el-option label="自管房产" value="3" />
              <el-option label="军队房产" value="4" />
              <el-option label="集体所有房产" value="5" />
              <el-option label="私有(自由)房产" value="6" />
              <el-option label="港、澳、台投资房产" value="7" />
              <el-option label="涉外房产" value="8" />
              <el-option label="其它房产" value="9" />
            </el-select>
            房产证书编号
            <el-input v-model="sfcontract.houseZsNo" placeholder="请填写房产证书编号" style="width: 200px"/>
            产权地址
            <el-input v-model="sfcontract.cqAddress" placeholder="请填写房产证书上地址" style="width: 200px" />
          </el-main>
        </el-container>

        <el-container>
          <el-header>
            ▍<span style="color:black;">业主信息</span>
          </el-header>
          <el-main>
            <el-form ref="sfcontract" :inline="true" :model="sfcontract" label-width="80px">
              <!--              <el-form-item label="收房合同id" prop="contractId">-->
              <!--                <el-input v-model="form.contractId" placeholder="请输入收房合同id" />-->
              <!--              </el-form-item>-->
              <el-form-item label="业主姓名" prop="ownerName">
                <el-input v-model="sfcontract.ownerName" placeholder="请输入名称" />
              </el-form-item>
              <el-form-item label="证件类型下拉框" >
                <el-select>
                  <el-option label="身份证" value="身份证" />
                  <el-option label="护照" value="护照" />
                  <el-option label="其他证件" value="其他证件" />
                </el-select>
              </el-form-item>
              <el-form-item label="业主证件号码" prop="ownerIdCard">
                <el-input v-model="sfcontract.ownerIdCard" placeholder="请输入证件号码" />
              </el-form-item>
              <el-form-item label="业主手机号" prop="ownerMobile">
                <el-input v-model="sfcontract.ownerMobile" placeholder="请输入手机号" />
              </el-form-item>
              <el-form-item label="业主联系地址" prop="ownerContactAddress">
                <el-input v-model="sfcontract.ownerContactAddress" placeholder="请输入业主联系地址" />
              </el-form-item>

              <el-form-item label="签约人姓名" prop="signUserName">
                <el-input v-model="sfcontract.signUserName" placeholder="请输入持卡人姓名" />
              </el-form-item>
              <el-form-item label="签约人身份证" prop="signUserIdCard">
                <el-input v-model="sfcontract.signUserIdCard" placeholder="签约人身份证" />
              </el-form-item>
              <el-form-item label="签约人电话" prop="signUserMobile">
                <el-input v-model="sfcontract.signUserMobile" placeholder="签约人电话" />
              </el-form-item>
              <el-form-item label="紧急联系电话" prop="signUserEmergencyPhone">
                <el-input v-model="sfcontract.signUserEmergencyPhone" placeholder="紧急联系电话" />
              </el-form-item>
              <el-form-item label="账户类型">
                <el-select v-model="sfcontract.accountType" placeholder="请选择银行账户类型">
                  <el-option label="对公账户" value="1" />
                  <el-option label="对私账户" value="0" />
                </el-select>
              </el-form-item>
              <template v-if="sfcontract.accountType != null">
                <el-form-item label="开户省份" prop="bankAccountProvince">
                  <el-input v-model="sfcontract.bankAccountProvince" placeholder="请输入开户行所在省ID" />
                </el-form-item>
                <el-form-item label="银行名称" prop="bankName">
                  <el-select v-model="sfcontract.bankName" placeholder="请选择银行名称">
                    <el-option v-for="item in listBank" :value="item.bankName">{{item.bankName}}</el-option>
                  </el-select>
                </el-form-item>
                <template v-if="sfcontract.accountType == 1">
                  <el-form-item label="开户银行(支行)" prop="bankOpen">
                    <el-input v-model="sfcontract.bankOpen" placeholder="请输入开户银行(支行)" />
                  </el-form-item>
                  <el-form-item label="联行行号" prop="bankBranchCodeLh">
                    <el-input v-model="sfcontract.bankBranchCodeLh" placeholder="请输入联行行号" />
                  </el-form-item>
                </template>
                <el-form-item label="银行卡号" prop="bankCard">
                  <el-input v-model="sfcontract.bankCard" placeholder="请输入银行卡号" />
                </el-form-item>
                <el-form-item label="账户姓名" prop="accountName">
                  <template v-if="sfcontract.accountType == 1">
                    <el-input v-model="sfcontract.accountName" placeholder="请输入企业名称" />
                  </template>
                  <template v-if="sfcontract.accountType == 0">
                    <el-input v-model="sfcontract.accountName" placeholder="请输入个人名称" />
                  </template>
                </el-form-item>
              </template>
            </el-form>
          </el-main>
        </el-container>

        <el-container>
          <el-header>
            ▍<span style="color:black;">租约信息</span>
          </el-header>
          <el-main>
            <div>
              租约日期：
              <el-input type="date" style="width: 200px" v-model="sfcontract.leaseStartTime"></el-input>
              至
              <el-input type="date" style="width: 200px" v-model="sfcontract.leaseEndTime"></el-input>
              <el-button type="warning">一年</el-button>
              <el-button type="warning">两年</el-button>
              <el-button type="warning">三年</el-button>
              <el-button type="warning">四年</el-button>
              <el-button type="warning">五年</el-button>
            </div>
            租金：<el-input v-model="sfcontract.monthRent" placeholder="请输入" style="width: 200px"></el-input>
            房产押金：<el-input v-model="sfcontract.depositMoney" placeholder="请输入" style="width: 200px"></el-input>
            支付方式：
            押
            <el-select v-model="sfcontract.depositType" placeholder="请选择押付方式">
              <el-option label="1" value="1" />
              <el-option label="2" value="2" />
              <el-option label="3" value="3" />
              <el-option label="4" value="4" />
            </el-select>
            付
            <el-select v-model="sfcontract.paymentType" placeholder="请选择押付方式">
              <el-option label="1" value="1" />
              <el-option label="2" value="2" />
              <el-option label="3" value="3" />
              <el-option label="4" value="4" />
            </el-select>
            备注：<el-input type="textarea" v-model="sfcontract.remark" style="width: 200px"></el-input>
            <el-button type="warning" @click="firstnext">下一步</el-button>
          </el-main>
        </el-container>


      </el-tab-pane>

      <el-tab-pane label="附件" name="second" disabled>
        <el-container>
          <el-header>
            ▍<span style="color:black;">房产证图片</span>
          </el-header>
          <el-main>
            <div>
              <el-upload
                class="upload-demo"
                drag
                :limit="10"
                :before-upload="handleBeforeUploadVideo"
                :http-request="requestFile1"
                :on-remove="removeFile"
                action="">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
              <!-- 进度条 -->
              <el-progress  v-if="progressFlag" :percentage="loadProgress"></el-progress>
              <el-button id="myBtn" v-if="progressFlag" size="mini">{{buttonText}}</el-button>
            </div>
          </el-main>
        </el-container>
        <el-container>
          <el-header>
            ▍<span style="color:black;">收房合同</span>
          </el-header>
          <el-main>
            main
          </el-main>
        </el-container>
        <el-container>
          <el-header>
            ▍<span style="color:black;">业主身份证明</span>
          </el-header>
          <el-main>Main</el-main>
        </el-container>
        <el-container>
          <el-header>
            ▍<span style="color:black;">代理人身份证明</span>
          </el-header>
          <el-main>Main</el-main>
        </el-container>
        <el-container>
          <el-header>
            ▍<span style="color:black;">银行卡信息</span>
          </el-header>
          <el-main>Main</el-main>
        </el-container>
        <el-container>
          <el-header>
            ▍<span style="color:black;">委托书</span>
          </el-header>
          <el-main>Main</el-main>
        </el-container>
        <el-container>
          <el-header>
            ▍<span style="color:black;">物业交割单</span>
          </el-header>
          <el-main>Main</el-main>
        </el-container>
        <el-container>
          <el-header>
            ▍<span style="color:black;">其他</span>
          </el-header>
          <el-main>Main</el-main>
        </el-container>
        <el-button type="warning" @click="activeName='first'">上一步</el-button>
        <el-button type="warning" @click="secondnext">跳过</el-button>
        <el-button type="warning" @click="secondnext">下一步</el-button>
      </el-tab-pane>

      <el-tab-pane label="付款单" name="third" disabled>
        <el-table
          :data="paymentPlans"
          border
          style="width: 100%">
          <el-table-column
            prop="payNumber"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="payableDate"
            label="应付日期">
          </el-table-column>
          <el-table-column
            label="金额">
            <template slot-scope="scope">
              <p v-if="scope.row.payNumber == 0">押金:</p>
              {{scope.row.paymentAmount}}元
            </template>
          </el-table-column>
          <el-table-column
            label="税费">
            <template slot-scope="scope">
              {{scope.row.tax}}元
            </template>
          </el-table-column>
          <el-table-column
            label="付款状态">
            <template slot-scope="scope">
              <p v-if="scope.row.payState==1">未付</p>
              <p v-if="scope.row.payState==2">已付</p>
            </template>
          </el-table-column>
          <el-table-column
            label="房产租金周期"
            width="300">
            <template slot-scope="scope">
              {{scope.row.paymentDaysBegin}} 至 {{scope.row.paymentDaysEnd}}
            </template>
          </el-table-column>
          <!--            <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        </template>
                      </el-table-column>-->
        </el-table>
        <el-button type="warning" @click="thirddnext">警告按钮</el-button>
      </el-tab-pane>
    </el-tabs>
    <!-- 收房合同录入-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>收房合同</span>
      <el-form :model="formHouseInfo" ref="formHouseInfo" :inline="true" label-width="68px">
        <el-form-item label="小区名称">
          <el-input v-model="formHouseInfo.premiseName"></el-input>
        </el-form-item>
        <el-form-item label="业主姓名">
          <el-input v-model="formHouseInfo.ownerName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="listHouseInfo" style="width: 100%">
        <el-table-column prop="ownerName" label="业主姓名" width="180"></el-table-column>
        <el-table-column prop="houseName" label="房产信息" width="130"></el-table-column>
        <el-table-column label="租房类型">
          <template slot-scope="scope">
            <span v-if="scope.row.houseLeaseType==1">合租</span>
            <span v-if="scope.row.houseLeaseType==2">整租</span>
            <span v-if="scope.row.houseLeaseType==3">公寓</span>
          </template>
        </el-table-column>
        <el-table-column prop="conSignTime" label="签约日期"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="warning" @click="checkOneHouse(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="formHouseInfo.pageNum"
        :limit.sync="formHouseInfo.pageSize"
        @pagination="chosehouse"
      />
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
  import { addOwner } from "@/api/renting/owner";
  import { addContract,getpaymentPlan,listContract} from "@/api/renting/contract";
  import { listBank} from "@/api/renting/bank";
  import { listInfo} from "@/api/renting/houseinfo";
  import { getUpToken } from "@/api/file/upload";
  import { v4 as uuidv4 } from 'uuid';
  import * as qiniu from 'qiniu-js'

  export default {
    name: "Owner",
    components: {
    },
    data() {
      return {
        //七牛文件上传
        fileName:'',
        loadProgress: 0, // 动态显示进度条
        progressFlag: false, // 关闭进度条
        buttonText: "暂停上传",
        upToken:null,
        images:null,
        domainAddress:'http://rcdkvzv4v.hn-bkt.clouddn.com/',

        //Tabs参数
        activeName: 'first',
        // 业主增加表单参数
        form: {},
        //选择房产信息参数
        housemsg:{},
        //收房合同录入参数
        sfcontract:{
          deptId:null,
          deptNo:'',
          premiseName:'',
          houseId:null,
          houseName:null,
          houseType:null,
          houseZsNo:'',
          cqAddress:'',
          ownerId:null,
          ownerName: '',
          bankBranchCodeLh:'',
          //是否为签约人默认0,0是1不是
          signWithOwner:0,
          //租房类型，合租，整租，公寓
          houseLeaseType:null,
          leaseStartTime:null,
          leaseEndTime:null,
          status:1,
          attachmentList:[],
        },
        //图片
        attachment:{},
        listBank:[],
        //以下是获取房产框框
        formHouseInfo:{
          pageNum: 1,
          pageSize: 10,
          rentType:"",
          name:""
        },
        total:0,
        listHouseInfo:[],
        //dialog框框开闭字段
        dialogVisible: false,
        //收据单的list
        paymentPlans:[],
      };
    },
    created() {
      this.getBankList();
      this.getUp();
    },
    methods: {
      //七牛的方法
      //移除文件
      removeFile() {
        this.progressFlag = false;
        this.buttonText = "暂停上传";
      },
      //上传之前
      handleBeforeUploadVideo(file) {
        //上传之前重新获取uptoken以免过期
        // console.log(file)
        this.progressFlag = true;
      },
      getUp(){
        getUpToken().then(res=>{
          this.upToken = res;
          console.log("后台获取token--",this.upToken);
        });
      },
      //
      uploadWithSDK(token,putExtra,config,domain,file,accType) {
        let that = this;
        console.log("token,",token);
        console.log("putExtra,",putExtra);
        console.log("config,",config);
        console.log("domain,",domain);
        console.log("file,",file);
        if (file) {
          let key =uuidv4() + file.name;
          // putExtra.customVars["x:name"] = key.split(".")[0];
          // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
          let error = function(err) {
            console.log(err);
          };

          let complete = function(res) {
            console.log(res);
            that.attachment.attachmentType=accType;
            that.attachment.url=that.domainAddress + res.key;
            that.sfcontract.attachmentList.push(that.attachment);
            console.log(that.sfcontract.attachmentList);
          };

          let next = function(response) {
            console.log(response);
            that.loadProgress = response.total.percent;
          };

          let subObject = {
            next: next,
            error: error,
            complete: complete
          };
          // 调用sdk上传接口获得相应的observable，控制上传和暂停
          let observable = qiniu.upload(file, key, token, putExtra, config);
          let subscription = observable.subscribe(subObject);

          //监听按钮事件，控制上传
          that.$nextTick(function () {
            document.getElementById("myBtn").addEventListener("click", function(){
              console.log("1111111111111111111111111111111111111111")
              if(that.buttonText == "暂停上传"){
                that.buttonText = "继续上传";
                subscription.unsubscribe();
              }else if(that.buttonText = "继续上传"){
                that.buttonText = "暂停上传";
                subscription = observable.subscribe(subObject);
              }
            });
          })

        }

      },
      //以下是文件上传的方法
      //合同照片
      requestFile1(param) {
        console.log("request,",param)
        let file = param.file;
        //uptoken
        let token = this.upToken;
        //外链域名
        let domain = this.domainAddress;
        //可以配置分片大小等配置，具体查看官方文档
        let config = {
          useCdnDomain: false,//是否使用CDN加速域名
          disableStatisticsReport: false,//是否禁用日志报告
          retryCount: 6,//上传自动重试次数
          chunkSize: "4"// 每片大小
        };
        let putExtra = {
          customVars: {}
        };
        this.uploadWithSDK(token,putExtra,config,domain,file,1)
      },
      //获取银行信息
      getBankList() {
        listBank().then(response => {
          this.listBank = response.rows;
        });
      },
      //点击选择房产
      chosehouse(){
        this.dialogVisible=true;
        listContract(this.formHouseInfo).then(response => {
          this.listHouseInfo = response.rows;
          console.log(response.rows)
          this.total = response.total;
        });
      },
      onSubmit() {
        this.chosehouse()
      },
      checkOneHouse(val){
        // this.dialogVisible=false;
        // this.housemsg.premiseName=val.premisesInfo.name;
        // this.housemsg.houseName=val.fcMessage;
        // //sfContract加一些数据
        this.sfcontract=val;
        //设置开始时间为上一次租房合同的结束时间
        this.sfcontract.leaseStartTime=val.leaseEndTime;
        this.sfcontract.leaseEndTime=null;
        this.sfcontract.lastContractNo=val.sfContractNo;
        this.sfcontract.lastContractId=val.id;
        this.sfcontract.bankBranchCodeLh=val.bankBranchCodeLh;
        this.sfcontract.id=null;
        // this.sfcontract.houseId=val.id;
        // this.sfcontract.houseName=val.premisesInfo.name;
        // this.sfcontract.houseLeaseType=val.zflxNumber;
        // this.sfcontract.businessId=val.dept.businessId;
        // this.sfcontract.deptId=val.dept.deptId;
        // this.sfcontract.deptNo=val.dept.deptNo;
      },
      //房产选择dialog框框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //first的下一步
      firstnext(){
        this.activeName="second";
      },
      //second的下一步
      secondnext(){
        alert(1)
        getpaymentPlan(this.sfcontract).then(response => {
          console.log(response.data)
          this.paymentPlans = response.data;
        });
        this.activeName="third";
      },
      thirddnext(){
        alert(1)
        console.log("6666"+this.sfcontract.businessId)
        addContract(this.sfcontract).then(res=>{
          this.$message.success("保存成功")
          this.$router.push("renting/contract/index")
        })
      },
      //Tabs单击事件
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>
<style>
  .el-header, .el-footer {
    background-color: white;
    color: orange;
    font-size: 20px;
    text-align: left;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: white;
    color: #333;
    text-align: center;
  }

</style>
